<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width=700 align="center">
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
    </table>
</body>
<script>
    // 事件委托
    // var otab = document.querySelector("table");
    // otab.onclick = function(eve){
    //     var e = eve || window.event
    //     var tar = e.target || e.srcElement;
    //     if(tar.tagName === "TD"){
    //         var ipt = document.createElement("input");
    //         ipt.value = tar.innerHTML;
    //         tar.innerHTML = "";
    //         tar.appendChild(ipt);
    //         ipt.onblur = function(){
    //             tar.innerHTML = ipt.value;
    //         }
    //     }
    // }


    // 非事件委托
    var atd = document.querySelectorAll("table td");
    for(var i=0;i<atd.length;i++){
        atd[i].onclick = function(){
            
            var ipt = document.createElement("input");
            ipt.value = this.innerHTML;
            this.innerHTML = "";
            this.appendChild(ipt);
            
            // 阻止ipt的事件冒泡
            ipt.onclick = function(eve){
                var e = eve || window.event;
                e.stopPropagation();
            }

            // 在ipt的事件中如何获取td
            var that = this;
            ipt.onblur = function(){
                that.innerHTML = this.value;
            }

        }
    }


</script>
</html>